<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">提前覆约</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="../../../static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">

				<view class="mention_box">
					<view class="mention_title">结清金额（元）</view>
					<view class="mention_num">3004.70</view>
					<view class="mention_text">共<span> 2 </span>笔未结清覆约</view>

					<block v-for="(item, index) in drawer">
						<view class="mention_drawer">
							<view class="mention_list" :class="item.dr == false ? 'drColor' : ''">
								<view class="tick iconfont icon-dagou" :class="item.tick ? 'tickColor' : ''"
									:data-index="index" @tap="getTickNum"></view>
								<view class="text_box">
									<view class="text_auto">
										<view class="text">剩余覆约：</view>
										<view class="money">￥3004.70</view>
									</view>
									<view class="text_auto">
										<view class="time">2024-04-19</view>
										<view class="text">签约25000.00元</view>
									</view>
								</view>
								<view class="other" :data-index="index" @tap="setDrShow">
									<view class="text">剩余1期</view>
									<view class="arrow iconfont icon-iconfonti2-copy-copy-copy-copy1"
										v-if="item.dr == true"></view>
									<view class="arrow iconfont icon-iconfonti2-copy-copy-copy-copy"
										v-if="item.dr == false"></view>
								</view>
							</view>
							<view class="rule_box" v-if="item.dr == true">
								<view class="rule_auto">
									<view class="rule">覆约本金</view>
									<view class="rule">￥2292.00</view>
								</view>
								<view class="rule_auto">
									<view class="rule">应覆利息</view>
									<view class="rule">按期收取，共计￥346.25</view>
								</view>
								<view class="rule_auto">
									<view class="rule">提前结清违约金</view>
									<view class="rule">￥366.45</view>
								</view>
								<view class="rule_auto">
									<view class="rule">覆约方式</view>
									<view class="rule">等额本息</view>
								</view>
							</view>
						</view>

					</block>


				</view>
				<view class="clear_box04"></view>
				<view class="footer_box">
					<view class="text_box">
						<view class="text_auto">
							<view class="text">合计:</view>
							<view class="money"> 35190.78</view>
							<view class="text">（含利息）</view>
						</view>
						<view class="text_auto">
							<view class="rule">已选择1笔，需归还全部金额</view>
						</view>
					</view>
					<view class="menu" :data-url="'/pages/personalcenter/appoint/square02'" @click="gotopage">支付</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				drawer: [{
						tick: true,
						dr: true,
					},
					{
						tick: false,
						dr: false,
					},
					{
						tick: false,
						dr: false,
					},
					{
						tick: false,
						dr: false,
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			getTickNum(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.drawer[index].tick = !that.drawer[index].tick;
			},
			setDrShow(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.drawer[index].dr = !that.drawer[index].dr;

			},
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				// 	that.Net._get('shop_home', {}, res => {
				// 		if (res.code == 200) {
				// 			//console.log(res);

				// 		}
				// 	});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			// that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
			//   if (res.code == 200) {
			//     //console.log(res)
			//     if (res.data.data == '') {
			//       uni.showToast({
			//         title: '已经是最后一页了',
			//         duration: 2000,
			//         icon: 'none'
			//       });
			//     } else {
			//       that.info = that.info.concat(res.data.data); //将数据拼接在一起
			//     }
			//   } else if (res.code == 0) {
			//     that.Msg.Success(res.msg, res => {});
			//   }
			// });
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.mention_box {
		width: 100%;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4vw;
	}

	.mention_box .mention_title {
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-top: 2vw;
	}

	.mention_box .mention_num {
		font-size: 10vw;
		color: #333;
		font-weight: bold;
		margin-top: 2vw;
		text-align: center;
	}

	.mention_box .mention_text {
		font-size: 3.5vw;
		color: #333;
		margin-top: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mention_box .mention_text span {
		color: #FC5D20;
		margin: 0 1vw;
	}

	.mention_drawer {
		width: 100%;
		margin-top: 4%;
	}

	.mention_drawer .mention_list {
		width: 100%;
		background-color: #FC5D20;
		padding: 5vw 4vw;
		display: flex;
		border-radius: 3vw 3vw 0 0;
	}

	.mention_drawer .mention_list .tick {
		width: 6vw;
		height: 6vw;
		border-radius: 50%;
		border: 1px solid #FFFFFF;
		font-size: 6vw;
		color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 4vw;
	}

	.mention_drawer .mention_list .text_box {
		flex: 0.8;
	}

	.mention_drawer .mention_list .text_box .text_auto {
		display: flex;
		align-items: center;
	}

	.mention_drawer .mention_list .text_box .text_auto:nth-child(2) {
		margin-top: 2vw;
	}

	.mention_drawer .mention_list .text_box .text_auto .text {
		font-size: 3.3vw;
		color: #fff;
	}

	.mention_drawer .mention_list .text_box .text_auto .money {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
	}

	.mention_drawer .mention_list .text_box .text_auto .time {
		font-size: 3.2vw;
		color: #fff;
		margin-right: 2vw;
		margin-top: 0.5vw;
	}

	.mention_drawer .mention_list .other {
		flex: 0.2;
	}

	.mention_drawer .mention_list .other .text {
		font-size: 3.2vw;
		color: #fff;
		text-align: right;
	}

	.mention_drawer .mention_list .other .arrow {
		font-size: 6vw;
		color: #fff;
		text-align: right;
		margin-top: 2vw;
	}

	.mention_drawer .rule_box {
		width: 100%;
		padding: 4vw;
		border-radius: 0 0 3vw 3vw;
		background-color: #F8F8F8;
	}

	.mention_drawer .rule_auto {
		display: flex;
		align-items: center;
		height: 8vw;
	}

	.mention_drawer .rule_auto .rule {

		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
	}

	.mention_drawer .rule_auto .rule:nth-child(1) {
		flex: 0.4;
	}

	.mention_drawer .rule_auto .rule:nth-child(2) {
		flex: 0.6;
		text-align: right;
	}

	.tickColor {
		border: none !important;
		color: #fff !important;
	}

	.drColor {
		border-radius: 3vw !important;
	}

	.footer_box {
		width: 100%;
		background-color: #fff;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
	}

	.footer_box .text_box {
		flex: 1;
	}

	.footer_box .text_box .text_auto {
		display: flex;
		align-items: center;
	}

	.footer_box .text_box .text_auto:nth-child(2) {
		margin-top: 2vw;
	}

	.footer_box .text_box .text_auto .money {
		font-size: 4.5vw;
		color: #FC5D20;
		font-weight: bold;
	}

	.footer_box .text_box .text_auto .text {

		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}

	.footer_box .text_box .text_auto .rule {
		font-size: 3.2vw;
		color: #666;
	}

	.footer_box .menu {
		width: 30vw;
		height: 15vw;
		line-height: 15vw;
		border-radius: 15vw;
		font-size: 4.2vw;
		background-color: #FC5D20;
		color: #fff;
		text-align: center;
		font-weight: bold;
	}
</style>